<template>
  <div class="find-pwd">
    <header class="flex between middle">
      <img src="static/darklogo.png" class="pointer" @click="toHomePage" />
      <div class="right">
        <span @click="toLoginPage">登录</span>
        <span>|</span>
        <span @click="toRegisterPage">注册</span>
      </div>
    </header>
    <div class="content flex center middle">
      <div class="pwd">
        <enter-user-name v-if="step === 0" @next-step="nextStep"></enter-user-name>
        <forget-pwd v-else-if="step === 1" :user-info="userInfo"></forget-pwd>
        <reset-pwd v-else :user-info="userInfo"></reset-pwd>
      </div>
    </div>
    <register-dialog ref="registerDialog"></register-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import RegisterDialog from '@/components/RegisterDialog'
import ForgetPwd from '@/components/ForgetPwd'
import ResetPwd from '@/components/ResetPwd'
import EnterUserName from '@/components/Enter-UserName.vue'
export default {
  components: {
    RegisterDialog,
    ResetPwd,
    ForgetPwd,
    EnterUserName
  },
  data() {
    return {
      step: 0,
      userInfo: {}
    }
  },
  created() {
    if (!this.$cookie.get('token')) {
      this.getAccessToken()
    }
  },
  methods: {
    toLoginPage() {
      const href = 'http://l-test19.dev.cn2.corp.agrant.cn:9990/#/login?relogin="true"'
      window.open(href, '_blank')
    },
    toRegisterPage() {
      this.$refs.registerDialog.registerDialogVisible = true
    },
    getAccessToken() {
      const params = {
        pid: 210
      }
      axios.post(this.$service.getAccessToken, params, {
        headers: {
          'X-NAME': 'smanage',
          'X-PASSWORD': '71ad3b8f53491648d4074bdebdda7ab0'
        }
      }).then(res => {
        this.$cookie.set('token', res.data.data.token)
      })
    },
    toHomePage() {
      this.$router.push('/')
    },
    nextStep(userInfo) {
      if (userInfo.telephone || userInfo.email) {
        this.step = 1
      } else {
        this.step = 2
      }
      this.userInfo = userInfo
    }
  }
}
</script>
<style lang="scss" scoped>
.find-pwd {
  line-height: 0 !important;
  padding: 0 20px;
  header {
    padding: 0 40px;
    img {
      height: 0.18rem;
    }
    span {
      font-size: 16px;
      line-height: 0.6rem;
      cursor: pointer;
    }
  }
  .content {
    line-height: 20px;
    height: calc(100vh - 100px);
    .pwd {
      width: 400px;
    }
  }
}
</style>
